<!--
* @Description: DatetimePickerPopup.vue 时间日期了选择器
* @Author: 王燕欣
* @Date: 2024-10-08 14:09
-->
<template>
  <van-popup v-model="showDateTimePopup" position="bottom">
    <van-picker title="时间区域" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
  </van-popup>
</template>

<script>
export default {
  name: "DatetimePickerPopup",
  props: {
    currentTime: {
      type: Object,
      default: function () {
        return {
          start: "00:00:00",
          end: "00:00:00",
        };
      },
    },
  },
  data() {
    return {
      showDateTimePopup: false,
      columns: [
        // 时
        {
          values: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
          defaultIndex: 0,
        },
        // 分
        {
          values: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37",
            "38",
            "39",
            "40",
            "41",
            "42",
            "43",
            "44",
            "45",
            "46",
            "47",
            "48",
            "49",
            "50",
            "51",
            "52",
            "53",
            "54",
            "55",
            "56",
            "57",
            "58",
            "59",
          ],
          defaultIndex: 0,
        },
        // 秒
        {
          values: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37",
            "38",
            "39",
            "40",
            "41",
            "42",
            "43",
            "44",
            "45",
            "46",
            "47",
            "48",
            "49",
            "50",
            "51",
            "52",
            "53",
            "54",
            "55",
            "56",
            "57",
            "58",
            "59",
          ],
          defaultIndex: 0,
        },
        {
          values: ["至"],
          defaultIndex: 0,
        },
        // 时
        {
          values: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
          ],
          defaultIndex: 0,
        },
        // 分
        {
          values: [
            "00",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37",
            "38",
            "39",
            "40",
            "41",
            "42",
            "43",
            "44",
            "45",
            "46",
            "47",
            "48",
            "49",
            "50",
            "51",
            "52",
            "53",
            "54",
            "55",
            "56",
            "57",
            "58",
            "59",
          ],
          defaultIndex: 0,
        },
        // 秒
        {
          values: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
            "32",
            "33",
            "34",
            "35",
            "36",
            "37",
            "38",
            "39",
            "40",
            "41",
            "42",
            "43",
            "44",
            "45",
            "46",
            "47",
            "48",
            "49",
            "50",
            "51",
            "52",
            "53",
            "54",
            "55",
            "56",
            "57",
            "58",
            "59",
          ],
          defaultIndex: 0,
        },
      ],
    };
  },
  created() {},

  mounted() {},
  watch: {},
  methods: {
    /**
     * @Description: 显示选择时间区间
     * @Author: 王燕欣
     * @Date: 2024-10-08 14:52
     */
    showModule() {
      try {
        //  显示的时候处理默认选择的值
        let start = this.currentTime.start;
        let end = this.currentTime.end;
        let startSplit = start.split(":");
        let endSplit = end.split(":");
        //  开始时间小时
        for (let HH = 0; HH < this.columns[0].values.length; HH++) {
          let itemHH = this.columns[0].values[HH];
          if (itemHH === startSplit[0]) {
            this.columns[0].defaultIndex = HH;
          }
        }
        //   开始分钟
        for (let SS = 0; SS < this.columns[1].values.length; SS++) {
          let itemSS = this.columns[1].values[SS];
          if (itemSS === startSplit[1]) {
            this.columns[1].defaultIndex = SS;
          }
        }
        // 开始秒
        for (let MM = 0; MM < this.columns[2].values.length; MM++) {
          let itemMM = this.columns[2].values[MM];
          if (itemMM === startSplit[2]) {
            this.columns[2].defaultIndex = MM;
          }
        }

        //  结束小时
        for (let HH = 0; HH < this.columns[4].values.length; HH++) {
          let itemHH = this.columns[4].values[HH];
          if (itemHH === endSplit[0]) {
            this.columns[4].defaultIndex = HH;
          }
        }
        //   结束分钟
        for (let SS = 0; SS < this.columns[5].values.length; SS++) {
          let itemSS = this.columns[5].values[SS];
          if (itemSS === endSplit[1]) {
            this.columns[5].defaultIndex = SS;
          }
        }
        // 结束秒
        for (let MM = 0; MM < this.columns[6].values.length; MM++) {
          let itemMM = this.columns[6].values[MM];
          if (itemMM === endSplit[2]) {
            this.columns[6].defaultIndex = MM;
          }
        }
      } catch (error) {
        console.log("选择时间区域错误------>", error);
      }

      this.$nextTick(() => {
        this.showDateTimePopup = true;
      });
    },
    /**
     * @Description: 确认选择区域时间 返回给父组件
     * @Author: 王燕欣
     * @Date: 2024-10-08 14:50
     */
    onConfirm(value) {
      //   console.log(`当前值：${value}, 当前索引：${index}`);
      this.$emit("onConfirm", this.handleCallback(value));
      this.showDateTimePopup = false;
    },
    onChange(value) {
      //   console.log(`当前值：${value}, 当前索引：${index}`);
      this.$emit("onChange", this.handleCallback(value));
    },
    /**
     * @Description: 取消选择时间
     * @Author: 王燕欣
     * @Date: 2024-10-08 14:52
     */
    onCancel() {
      this.$emit("onCancel");
      this.showDateTimePopup = false;
    },
    handleCallback(value) {
      let start = value[0] + ":" + value[1] + ":" + value[2];
      let end = value[4] + ":" + value[4] + ":" + value[6];
      let params = { start: start, end: end };
      return params;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

